// 确认订单
<template>
	<view class="container">
		<template v-if="init">
			<!-- v-if="isNeedAddress == null" -->
			<view class="address padding">
				<SelectAddress v-model="address" :isShowPhone="true"></SelectAddress>
			</view>
			<SplitLine></SplitLine>
			<view class="products" v-for="(item) in packages" :key="item.id">
				<div class="imgBox"><img :src="item.detailImages" alt="" /></div>
				<div class="infoText">
					<p class="skuName">{{ item.skuName }}</p>
					<p>{{ item.skuTypeName }}</p>
				</div>
				<view class="count-c">
					x{{ item.count }}
				</view>
			</view>
			<SplitLine></SplitLine>
			<view class="list padding">
				<view class="list-item">
					<view class="body">
						备注
					</view>
					<view class="arrow-right remark">
						<input type="text" v-model="remark" placeholder="请输入您对卖家说的话" placeholder-class="placeholder" />
					</view>
				</view>
			</view>
			<view style="height:160upx;"></view>
			<view class="footer-actions safe-area-bottom">
				<view class="price-c">

				</view>
				<IButton class="submit-btn" round size="small" @click="createOrder">
					<text>支付运费</text>
				</IButton>
			</view>
			<!-- 确认支付弹框 -->
			<uni-popup ref="details" type="bottom">
				<view class="pay">
					<h3>确认支付运费</h3>
					<view class="price">
						<text>运费：</text>
						<text>￥{{ findFreight }}</text>
					</view>
					<!-- <view class="num">
						<view>
							<checkbox color="#6C40FF" :checked="shouldCheckPayment"
								@click="updateShouldCheck()" background-color="#fff" border-color="#6C40FF"
								activeBackgroundColor="#fff" activeBorderColor="#6C40FF" />
							<text>积分：</text>
						</view>
						<text>{{ integral }}积分</text>
					</view>
					<view class="sunList">
						<view class="sums">
							<text></text>
							<text v-if="integralNum">积分扣除：-{{ integralNum }}</text>
						</view>
					</view> -->

					<view class="agree">
						<text>
							<checkbox color="#6C40FF" :checked="checkPayMent" @click="updateCheck()"
								background-color="#fff" border-color="#6C40FF" activeBackgroundColor="#fff"
								activeBorderColor="#6C40FF" />
						</text>
						我已阅读并同意<u @click="goRule()">《镇北魔盒盲盒须知》</u>
					</view>
					<view class="button" @click="payment">
						确认购买
					</view>
				</view>
			</uni-popup>


		</template>
		<view style="height: 60vh;overflow: hidden;" v-else>
			<NoData></NoData>
		</view>

	</view>
</template>

<script>
import mixin from "@/utils/mixin.js"
import SplitLine from "@/components/SplitLine/index.vue";
import IButton from "@/components/Button/index.vue";
import payment from "@/utils/payment.js"
import {
	pay,
	userAssert,
} from "@/api/blind.js";
import {
	$getStorage,
	$setStorage,
	$removeStorage
} from "@/utils/auth.js";
import {
	mapGetters
} from "vuex"
export default {
	mixins: [mixin],
	components: {
		SplitLine,
		IButton,
	},
	data() {
		return {
			address: {},
			order: {
				is_use_redpack: 'unselect'
			},
			isNeedAddress: null,
			skus: [],
			seckillId: '',
			groupPriceUuid: '',
			products: [],
			remark: '',
			init: true,
			couponsVisible: false,
			unusableCoupons: [],
			usableCoupons: [],
			currentCoupon: {},
			current: 0,
			animationData: {},
			animationData2: {},
			coverType: '',
			_source: '',
			submitorder: {},
			nodeId: "",
			packages: [],
			// 积分
			integral: "",
			findFreight: 0,
			// 用户协议选中
			checkPayMent: false,
			integral: {},
			integralCheck: false,
			integralNum: 0,
		}
	},
	computed: {
		...mapGetters(['token']),
		totalPrice() {
			let total = this.order.price;
			return total
		},
		payPrice() {
			let pay = this.order.price;
			return pay
		},
		shouldCheckPayment() {
			// 根据积分余额决定多选框是否选中
			return this.integral > 0 && this.integralCheck;
		},
	},
	onLoad(e) {
		uni.$on('selectAddress', res => {
			// console.log("===============")
			// console.log(res)
			this.address = res
			// this.getOrderInfo()
		})
	},
	onUnload() {
		uni.$off('selectAddress', data => {
			console.log('移除 selectAddress 自定义事件');
		})
	},
	onShow() {
		this.getSkuInfo()
	},
	methods: {
		// 积分选择框逻辑
		updateShouldCheck() {
			this.integralCheck = !this.integralCheck;

			this.createOrder(true);
		},
		// 盲盒规则
		goRule() {
			uni.navigateTo({
				url: "/pages/rule/rule/rule?id=2"
			})
		},
		// 获取sku信息
		getSkuInfo() {
			let params = $getStorage("selectItem")
			this.$http(`/package-skus/findById`, 'post', params).then(res => {
				if (res.code == 200) {
					this.packages = res.data.packageSkuDetailView
					this.address = res.data.addresses
				}
			})
		},
		// 用户协议选中
		updateCheck() {
			this.checkPayMent = !this.checkPayMent
		},
		// 确认发货
		createOrder() {
			// 开启弹框
			this.$refs.details.open('bootom')
			const skuIdArray = this.packages.map(item => item.skuId);
			// 查询运费接口
			this.$http("/package-skus/findFreightBatch", "post", {
				skuIds: skuIdArray,
				addressesId: this.address.id
			}).then(res => {
				if (res.data) {
					this.findFreight = res.data
				} else {
					this.findFreight = 0
				}
			})

		},
		// 支付
		payment() {
			// 用户协议勾选校验
			if (!this.checkPayMent) {
				uni.showToast({
					title: "请阅读后勾选镇北魔盒盲盒须知再支付",
					icon: 'none',
					duration: 2000,
				});
				return
			}
			let ment = {
				totalMoney: this.findFreight,
				payMoney: this.findFreight,
				activiteType: 1,
				payType: 2,
				couponsId: "",
				integral: 0
			}
			pay(ment).then(res => {
				if (res.code == 200) {
					this.$refs.details.close();
					uni.showToast({
						title: "支付成功",
						icon: 'none',
						duration: 4000,
					});
					let params = $getStorage("selectItem")
					let data = {
						packageSkuIds: params.packageSkuIds,
						addressId: this.address.id,
						remark: this.remark
					}
					this.$http(`/package-skus/confirmShipment`, 'post', data).then(res => {
						if (res.code == 200) {
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/myBox/index"
								})
							}, 2000)
							$removeStorage("selectItem")
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 4000,
					});
				}
			})
		}

	}
}
</script>

<style lang="scss" scoped>
page {
	background: linear-gradient(to right bottom, #090919, #233a47) !important;
}

.list-item {
	display: flex;
	align-items: center;
	position: relative;
}

.submit-btn {
	background: rgb(108, 67, 255) !important;
	color: #fff;
	background-image: none;
}

.tag {
	color: #fff;
}

.list-item .body {
	flex: 1;
	display: flex;
	align-items: center;
}

.list-item-title {
	flex: 1;
}

.redpack-switch {
	margin-left: 20rpx;
	position: relative;
	left: 10rpx;
}

.address {
	flex: 1;
}

.pay {
	width: 100%;
	height: 400rpx;
	background-color: #fff;
	border-radius: 50rpx 50rpx 0 0;
	padding: 30rpx 0;
	overflow: auto;

	.prices {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;

		.content {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
	}

	.image-price {
		width: 220rpx;
		height: 220rpx;
	}

	h3 {
		margin: 30rpx 0 50rpx;
		text-align: center;
		color: #000;
	}

	.price {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;

		text:nth-child(2) {
			font-weight: 900;
		}
	}

	.num {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;
	}

	.list-item {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 10px;
	}

	.list-item .body {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.list-item-title {
		flex: 1;
	}

	.meta {
		font-size: 35rpx;
	}

	.redPack {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #000;
		margin-bottom: 20rpx;
		font-weight: 100;

		text:nth-child(2) {
			font-weight: 900;
			display: flex;
			align-items: center;
			height: 100%;
		}
	}

	.sunList {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.sum {

			box-sizing: border-box;
			padding: 0 20rpx;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				background: #6C40FF;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.sums {
			box-sizing: border-box;
			padding: 0 20rpx;
			color: #000;
			margin-bottom: 20rpx;
			font-weight: 100;

			text:nth-child(2) {
				font-weight: 900;
				background: red;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.agree {
		color: #000;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			transform: scale(0.6);
			display: block;
		}

		u {
			color: #6C40FF;
		}
	}

	.skip {
		margin: 0 -70rpx;

		text {
			transform: scale(0.8);
			display: block;
			font-size: 36rpx;
			display: flex;
			align-items: center;

			span {
				margin-left: 16rpx;
				line-height: 40rpx;
			}
		}
	}

	.button {
		width: 560rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 30rpx auto;
		font-weight: 900;
		font-size: 35rpx;
		text-align: center;
		border-radius: 15rpx;
		color: #fff;
		background: url(../../static/seach.png) center/ cover no-repeat;
	}
}

.products {
	display: flex;
	align-items: center;
	padding: 24rpx;
	justify-content: space-around;

	.imgBox {
		display: inline-block;
		width: 124rpx;
		height: 124rpx;
		overflow: hidden;
		margin-right: 24rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.infoText {
		color: #fff;

		.skuName {
			margin-bottom: 24rpx;
		}
	}
	.count-c{
		color: #fff;
	}
}

.list-item {
	height: 80upx;

	.body {
		font-size: 28upx;
		color: #fff;
	}

	.arrow-right {
		display: flex;
		align-items: center;

		&.bold {
			font-weight: bold;
			color: #fff;
		}

		.icon-arrow-right {
			font-size: 50rpx;
			margin-right: -14rpx;
			color: #fff;
		}
	}

	.meta {
		font-size: 26upx;
		color: #fff;
	}

	.remark {
		input {
			height: 100%;
			text-align: right;
			color: #fff;
			font-size: 28upx;
			width: 600upx;

			.placeholder {
				color: #fff;
			}
		}
	}
}



.footer-actions {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	// background-color: #ffffff;
	background: linear-gradient(to right bottom, #090919, #233a47);
	box-shadow: 0 -6upx 8upx rgba(206, 206, 206, 0.3);
	padding: 0 24upx;
	box-sizing: border-box;

	.price-c {
		height: 114upx;
		display: flex;
		align-items: center;
		font-size: 46upx;
		color: #fff;
	}
}
</style>